<template>
  <div ref="chart" class="charts chart-pie"></div>
</template>
<script>
export default {
  name: 'Semicircle',
  props: ['allCount', 'pietype'],
  data() {
    return {
      getvalue: '',
      coclr: '',
      coclrA: '',
      text: ''
    }
  },
  watch: {
    allCount(newVal) {
      this.allCount = newVal
      this.getEchartData()
    }
  },
  created() {
    console.log(this.allCount)
  },
  mounted() {
    this.$nextTick(() => {
      this.getEchartData()
    })
  },
  methods: {
    getEchartData() {
      const chart = this.$refs.chart
      if (this.pietype === '1') {
        this.getvalue = this.allCount + '%'
        this.text = '解决率'
        this.coclr = '#1BCEC5'
        this.coclrA = '#1BCEC5'
      } else {
        this.text = ''
        this.getvalue = this.allCount.delayedCount === 0 ? '0' : this.allCount.delayedCount
        this.coclr = '#87C138'
        this.coclrA = '#E2D856'
      }
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
          title: {
            text: this.getvalue,
            textStyle: {
              color: '#292A2D',
              fontSize: 25
            },
            subtext: this.text,
            subtextStyle: {
              color: 'rgba(0, 0, 0, 0.45)',
              fontSize: 15
            },
            itemGap: 5,
            left: 'center',
            top: '25%'
          },
          tooltip: {
            formatter: function (params) {
              return '<span style="color: #fff;">解决率：' + this.getvalue + '</span>'
            }
          },
          angleAxis: {
            max: 100,
            clockwise: true, // 逆时针
            // 隐藏刻度线
            show: false
          },
          radiusAxis: {
            type: 'category',
            show: true,
            axisLabel: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          polar: {
            center: ['50%', '50%'],
            radius: ['90%', '100%'] // 图形大小
          },
          series: [
            {
              type: 'bar',
              data: this.getvalue,
              showBackground: true,
              backgroundStyle: {
                color: this.coclrA
              },
              coordinateSystem: 'polar',
              roundCap: true,
              barWidth: 3,
              itemStyle: {
                normal: {
                  opacity: 1,
                  color: this.coclr,
                  shadowBlur: 3,
                  shadowColor: this.coclr
                }
              }
            }
          ]
        }
        myChart.setOption(option)
        window.addEventListener('resize', function () {
          myChart.resize()
        })
      }
    }
  }
}
</script>

<style scoped>
.charts {
  width: 100%;
  height: 216px;
}
</style>
